<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title></title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <header class="mui-bar mui-bar-nav layout-bg">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left l-arrow"></a>
            <h1 class="mui-title">我的订单</h1>
        </header>

        <div class="order-bar layout-gap">
            <div class="flex-box">
                <a class="order-flex flex" id="my_order">
                    <span>进行中</span>
                </a>
                <a class="order-flex flex">
                    <span class="order-flex-check">已完成</span>
                </a>
            </div>
        </div>

        <div class="order-container">
        	<div id="refreshContainer" class="mui-content mui-scroll-wrapper" style="padding-top: 0;">
				<div class="mui-scroll">
		    		<!--数据列表-->
			    	<ul class="mui-table-view mui-table-view-chevron">
			    		<li class="mission-item mar-b-10">
			                <div class="mui-flex order-title">
			                    <div class="cell">
			                        <div class="mission-content a-line">订单编号: 1503038847345</div>
			                    </div>
			                    <div class="cell fixed">
			                        <span class="finish-icon fl"></span>
			                        <span class="have-text fl">已完成</span>
			                    </div>
			                </div>
			                
			                <div class="mission-details">
			                    <div class="details-list">
			                        <div class="details-list-left fl">搬运时间：</div>
			                        <div class="details-list-right mui-text-right">2017-09-21 18:45</div>
			                    </div>
			                    <div class="details-list">
			                        <div class="details-list-left fl">出发地：</div>
			                        <div class="details-list-right mui-text-right">庐阳区临泉路387号102</div>
			                    </div>
			                    <div class="details-list">
			                        <div class="details-list-left fl">目的地：</div>
			                        <div class="details-list-right mui-text-right">市府广场</div>
			                    </div>
			                </div>
			
			                <a class="order-d-text">订单详情</a>
			            </li>
			            
			            <li class="mission-item mar-b-10">
			                <div class="mui-flex order-title">
			                    <div class="cell">
			                        <div class="mission-content a-line">订单编号: 1503038847345</div>
			                    </div>
			                    <div class="cell fixed">
			                        <span class="finish-icon fl"></span>
			                        <span class="have-text fl">已完成</span>
			                    </div>
			                </div>
			                
			                <div class="mission-details">
			                    <div class="details-list">
			                        <div class="details-list-left fl">搬运时间：</div>
			                        <div class="details-list-right mui-text-right">2017-09-21 18:45</div>
			                    </div>
			                    <div class="details-list">
			                        <div class="details-list-left fl">出发地：</div>
			                        <div class="details-list-right mui-text-right">庐阳区临泉路387号102</div>
			                    </div>
			                    <div class="details-list">
			                        <div class="details-list-left fl">目的地：</div>
			                        <div class="details-list-right mui-text-right">市府广场</div>
			                    </div>
			                </div>
			
			                <a class="order-d-text">订单详情</a>
			            </li>
			    	</ul>
		    	</div>
            </div>
           
            <!--<p class="read-more">没有更多了！</p>-->
        </div>
        
        <div class="mui-overflow" style="display: none">
            <img src="images/order-none.png" alt="" class="order-none">
            <p class="order-none-text">还没有订单哦～</p>
        </div>
    </div>
    
    <script type="text/javascript">
		$(function() {
			mui.init({
				pullRefresh : {
				    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				    down : {
				      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
				      color:'#ff850b', //可选，默认“#2BD009” 下拉刷新控件颜色
				      height:'50px',//可选,默认50px.下拉刷新控件的高度,
				      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
				      offset:'74px', //可选 默认0px,下拉刷新控件的起始位置
				      auto: true,//可选,默认false.首次加载自动上拉刷新一次
				      callback: ()=> {
				      	setTimeout(()=> {
				      		mui('#refreshContainer').pullRefresh().endPulldown();
				      	}, 1000)
				      } 
				    },
				    up : {
				      height:50,//可选.默认50.触发上拉加载拖动距离
				      auto:false,//可选,默认false.自动上拉加载一次
				      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
				      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
				      callback : ()=> {
				      	setTimeout(()=> {
				      		mui('#refreshContainer').pullRefresh().endPullup(false);
				        }, 1000)
				      }
				    }
			    },
			});
			
			mui.plusReady(()=> {
				mui('.flex-box').on('tap', '#my_order', ()=> {
		    		mui.openWindow({
						url: 'my-order.html',
						id: 'my-order.html'
					});
		    	});
			})
		})
    </script>
</body>
</html>